<template>
  <!-- 管理圈子页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/circle/zuojiantou.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_">管理圈子</view>
      <view class="right_"></view>
    </view>
    <view class="tap">
      <view
        :class="[activeIndex == index ? 'active item' : 'item']"
        v-for="(item, index) in ['我创建的', '我加入的']"
        :key="index"
        @tap="handleIndex(index)"
      >
        <text>{{ item }}</text>
        <text class="xian" v-if="activeIndex == index"></text>
      </view>
    </view>

    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="quanList.length == 0">
      <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
      <text>暂无圈子</text>
    </view>
    <view class="list">
      <navigator
        class="item"
        :url="'/pages/circle/index?id=' + item.id"
        v-for="(item, index) in quanList"
        :key="index"
        hover-class="none"
      >
        <view class="left">
          <image :src="item.orgUrl" mode="aspectFill"></image>
        </view>
        <view class="center">
          <view
            class="top"
            :style="{
              width: item.isRefundDisplayed == 1 ? '400rpx' : '464rpx',
            }"
          >
            {{ item.orgName }}
          </view>
          <view class="bottom">
            成员&nbsp; {{ item.peopleNumber }}
            <text class="xian"></text>
            微帖&nbsp; {{ item.postNumber }}
          </view>
        </view>
        <view
          class="end"
          v-if="activeIndex == 0"
          @tap.stop="handleShezhi(item.id)"
        >
          设置
        </view>
        <view class="end_right" v-if="activeIndex == 1">
          <view class="end1" @tap.stop="handleTuiChu(item.id)"> 退出 </view>

          <view
            class="end1 end2"
            @tap.stop="handleTuiKuan(item.id)"
            v-if="item.isRefundDisplayed == 1"
          >
            退款
          </view>
        </view>
      </navigator>
    </view>
    <!--      </swiper-item>
    </swiper> -->
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      activeIndex: 0,
      pageSize: 10,
      quanList: [], //圈子列表
      bottom: false,
      noMore: false,
      isStriking: true,
      control: false, //控制事件操作
    };
  },
  onLoad() {
    this.myJoinCircle(1);
  },
  onShow() {
    this.control = false;
    if (this.activeIndex == 0) {
      this.myJoinCircle(1);
    }
    this.bottom = false;
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.noMore = false;
    this.control = false;
    this.pageSize = 10;
    setTimeout(() => {
      if (this.activeIndex == 0) {
        this.myJoinCircle(1);
      } else if (this.activeIndex == 1) {
        this.myJoinCircle(2);
      }
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1000,
        icon: "none",
      });
    }, 500);
  },
  onReachBottom() {
    if (!this.isStriking) {
      return false;
    }
    this.bottom = true;
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    setTimeout(() => {
      if (this.activeIndex == 0) {
        this.myJoinCircle(1);
      } else if (this.activeIndex == 1) {
        this.myJoinCircle(2);
      }
    }, 20);
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    handleShezhi(index) {
      if (!this.control) {
        return false;
      }
      // 设置界面
      uni.navigateTo({
        url: "/pages/index/chargeManage?id=" + index,
      });
    },
    handleTuiKuan(index) {
      if (!this.control) {
        return false;
      }
      //退款页面
      uni.navigateTo({
        url: "/pages/circle/circleRefund?id=" + index,
      });
    },
    handleTuiChu(index) {
      if (!this.control) {
        return false;
      }
      //退出圈子操作
      this.bottom = false;
      uni.showModal({
        title: "提示",
        content: "请确定是否退出圈子",
        cancelText: "再想想",
        cancelColor: "#007aff",
        confirmColor: "#000000",
        success: (res) => {
          if (res.confirm) {
            let token = uni.getStorageSync("token");
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "h5/orgCircle/signOutFriends",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": this.globalData.apiVersion,
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  orgId: index,
                },
              }).then((res) => {
                // console.log(res, '退出圈子')
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "退出成功",
                    duration: 1500,
                    icon: "none",
                  });

                  this.myJoinCircle(2);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    handleIndex(index) {
      this.control = false;
      this.bottom = false;
      this.noMore = false;
      this.pageSize = 10;
      this.activeIndex = index;
      this.isStriking = true;
      if (index == 0) {
        this.myJoinCircle(1);
      } else if (index == 1) {
        this.myJoinCircle(2);
      }
    },
    myJoinCircle(type_) {
      //圈子列表
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/myJoinCircle",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            type: type_,
            pageNumber: 1,
            pageSize: this.pageSize,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.quanList = res.data.data.rows;
            this.control = true;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore &&
              this.quanList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 2000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (this.quanList.length >= res.data.data.total && this.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 2000,
                icon: "none",
              });
              this.isStriking = false;
            } else if (
              this.bottom &&
              this.quanList.length < res.data.data.total
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 2000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 92rpx;

  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    // line-height: 92rpx;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 40rpx;
      width: 40rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}

.wu_Huo {
  margin-top: 300rpx;
  padding-bottom: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 360rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

page {
  background: rgba(248, 248, 250, 1);
}

.tap {
  width: 750rpx;
  height: 84rpx;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  border-bottom: 2rpx solid #eee;

  .item {
    width: 50%;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .item.active {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    display: flex;
    flex-direction: column;
    align-items: center;

    // justify-content: center;
    .xian {
      display: inline-block;
      width: 40rpx;
      height: 6rpx;
      background: rgba(33, 104, 235, 1);
      border-radius: 4rpx;
      margin-top: -18rpx;
    }
  }
}

.list {
  padding: 0 32rpx;

  .item {
    width: 100%;
    height: 132rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 12rpx;
    padding: 23rpx 19rpx;
    box-sizing: border-box;
    display: flex;
    position: relative;
    margin-top: 20rpx;

    .left {
      width: 86rpx;
      height: 86rpx;
      margin-right: 13rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .center {
      height: 86rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 360rpx;
      }

      .bottom {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);

        .xian {
          display: inline-block;
          height: 20rpx;
          width: 2rpx;
          background-color: #ccc;
          margin: 0 12rpx;
          margin-bottom: -3rpx;
        }
      }
    }

    .end {
      position: absolute;
      top: 26rpx;
      right: 17rpx;
      width: 74rpx;
      height: 34rpx;
      background: rgba(201, 220, 255, 1);
      border-radius: 21rpx;
      line-height: 34rpx;
      text-align: center;
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(33, 104, 235, 1);
    }

    .end1 {
      position: absolute;
      top: 26rpx;
      right: 17rpx;
      width: 74rpx;
      height: 34rpx;
      border-radius: 21rpx;
      line-height: 31rpx;
      text-align: center;
      border: 2rpx solid rgba(151, 151, 151, 1);
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      box-sizing: border-box;
    }

    .end2 {
      position: absolute;
      right: 102rpx;
      // top: 75rpx;
    }
  }
}
</style>
